<!--@TODO dialog换Element UI-->
<!--@TODO 结算-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商城</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
	<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<style>
		.masonry {
			column-count: 4;
			column-gap: 0;
			width: 1200px;
			margin: 25px auto;
		}

		.item {
			padding: 2px;
			position: relative;
			z-index: 0;
			/*counter-increment: item-counter;*/
			transition: all 0.5s;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;

		}

		.item img {
			display: block;
			width: 100%;
			height: auto;
		}

		.item::after {
			position: absolute;
			display: block;
			top: 2px;
			left: 2px;
			width: 24px;
			height: 24px;
			text-align: center;
			line-height: 24px;
			background-color: #000;
			color: #fff;
			/*content: counter(item-counter);*/
		}

		.item:hover{
			z-index: 9999;
			transform:scale(1.2);
			/*-webkit-transform:scale(1.2);*/
			/*-moz-transform:scale(1.2);*/
			/*-o-transform:scale(1.2);*/
			/*-ms-transform:scale(1.2);*/
		}

		.dialog{
			z-index: 99999;
		}


	</style>
</head>
<body>
	<!-- --------------------页眉板块-------------------- -->
	<div id="app">
	<div class="header">
		<!-- 设置logo -->
		<div class="logo">
			<img src="image/logo.png">
		</div>
		<!-- 设置菜单 -->
		<div class="menu" onmouseleave="show_menu1()">  
			<div class="menu_title" onclick="show_menu()">
				<a href="#">内容分类</a></div>
			<ul id="menu1" >
				<li>现实主义</li>
				<li>抽象主义</li>
			</ul>
		</div>
		<!-- 设置用户登录 -->
		<div class="auth">
			<ul>
				<li><a href="#" id="cartlink" @click="cartdetail()">购物车</a></li>
<!--				<li><a href="#" id="cartlink" @click="visible = true">购物车</a></li>-->
<!--				<li><a href="#" id="cartlink" @click="cartdetail();visible=true">购物车</a></li>-->
				<li><a href="/register2.html">注册</a></li>


				<li>
					<div v-if="userid">
						<ul id="loginmemu">
							<li>现实主义</li>
							<li>抽象主义</li>
						</ul>
					</div>
					<div v-else>
						<a href="#" id="loginlink" @click="logindetail()">登录</a>
					</div>

				</li>

			</ul>
		</div>
	</div>

	<!-- --------------------正文板块-------------------- -->
	<div class="content">
		<!-- 设置广告栏 -->
		<div class="banner">
			<img src="image/welcome.png" class="banner_img">
		</div>

		<div class="masonry" ><!--id="app"-->
			<div v-for="(item,i) in info" class="item">

				<img :src="item.img" @click="detail(i)"/>

			</div>


<!--			商品信息对话框-->
			<el-dialog :visible.sync="visible3" title="商品信息">
				<table>
					<tr>
						<td><img src="" id="dialogimg"></td>
					</tr>
					<tr>
						<td><p id="itemname"></p></td>
					</tr>
					<tr>
						<td><p id="description"></p></td>
					</tr>
					<tr>
						<td><p id="price"></p></td>
					</tr>
					<tr>
						<td>
<!--							<button type="button" id="addCart" @click="addCart()">添加到购物车</button>-->
							<el-button type="button" id="addCart" @click="addCart()">添加到购物车</el-button>
						</td>
					</tr>
				</table>
			</el-dialog>

<!--			<div id="dialog" title="商品信息" class="dialog">-->
<!--				我是一个对话框-->
<!--				<table>-->
<!--					<tr>-->
<!--						<td><img src="" id="dialogimg"></td>-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td><p id="itemname"></p></td>-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td><p id="description"></p></td>-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td><p id="price"></p></td>-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td>-->
<!--&lt;!&ndash;							<button type="button" id="add" @click="add(itemid)">添加到购物车</button>&ndash;&gt;-->
<!--&lt;!&ndash;							v-bind:itemid&ndash;&gt;-->
<!--							&lt;!&ndash;@TODO 向div传参？在button传参？&ndash;&gt;-->
<!--								<button type="button" id="addCart">添加到购物车</button>-->
<!--						</td>-->
<!--					</tr>-->
<!--				</table>-->
<!--			</div>-->


<!--			登录对话框-->
			<el-dialog :visible.sync="visible2" title="登录">
				<table>
					<tr>
						<td>
							<input type="text" name="email" id="email" placeholder="邮箱"/>
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" name="password" id="password" placeholder="密码"/>
						</td>
					</tr>
				</table>
<!--				<button type="button" id="loginbutton" @click="logindetail">登录</button>-->
				<el-button type="button" id="loginbutton" @click="loginbutton">登录</el-button>

			</el-dialog>

<!--			<div id="logindialog" title="登录" class="dialog">-->
<!--				<table>-->
<!--					<tr>-->
<!--						<td>-->
<!--							<input type="text" name="email" id="email" placeholder="邮箱"/>-->
<!--						</td>-->
<!--					</tr>-->
<!--					<tr>-->
<!--						<td>-->
<!--							<input type="password" name="password" id="password" placeholder="密码"/>-->
<!--						</td>-->
<!--					</tr>-->
<!--				</table>-->
<!--				<button type="button" id="loginbutton" >登录</button>-->
<!--			</div>-->

<!--			<el-dialog :visible.sync="visible2" title="登录">-->
<!--				<div class="login_box">-->
<!--					&lt;!&ndash; 输入表单 &ndash;&gt;-->
<!--					<el-form>-->
<!--						&lt;!&ndash; name &ndash;&gt;-->
<!--						<el-form-item>-->
<!--							<el-input></el-input>-->
<!--						</el-form-item>-->
<!--						&lt;!&ndash; password &ndash;&gt;-->
<!--						<el-form-item>-->
<!--							<el-input></el-input>-->
<!--						</el-form-item>-->
<!--						&lt;!&ndash;button &ndash;&gt;-->
<!--						<el-form-item class="btns">-->
<!--							<el-button type="primary">登录</el-button>-->
<!--							<el-button type="info">重置</el-button>-->
<!--						</el-form-item>-->
<!--					</el-form>-->
<!--				</div>-->
<!--			</el-dialog>-->





<!--&lt;!&ndash;购物车对话框&ndash;&gt;-->
<!--			<div id="cartdialog" title="购物车" class="dialog">-->
<!--				<table class="table">-->
<!--					<th scope="col">外观</th><th scope="col">名称</th><th scope="col">价格</th><th scope="col">操作</th>-->
<!--					<tr v-for="item in cart" @>-->
<!--						&lt;!&ndash;                <td><img :src="item.img" @onclick="add(item.id)"/></td>&ndash;&gt;-->
<!--						<td><img :src="item.img"/></td>-->
<!--						<td>{{item.itemname}}</td>-->
<!--						<td>{{item.price}}</td>-->
<!--						<td>-->
<!--							<button type="button" id="purchasebutton">X</button>-->
<!--						</td>-->
<!--					</tr>-->
<!--				</table>-->
<!--			</div>-->
			<el-dialog :visible.sync="visible" title="购物车">
				<table class="table" style="width:700px">
					<th scope="col">外观</th>
					<th scope="col">名称</th>
					<th scope="col">价格</th>
					<th scope="col">操作</th>
					<tr v-for="item in cart">
						<td><img :src="item.img"/></td>
						<td>{{item.itemname}}</td>
						<td>{{item.price}}</td>
						<td>
							<el-button type="button" id="deletecartbutton" @click="detelecart(item.cartid)">X</el-button>
						</td>
					</tr>
<!--					<tr>-->
<!--						<el-button type="button" id="purchasebutton" @click="purchase()">购买</el-button>-->
<!--						&lt;!&ndash;@TODO 总价&ndash;&gt;-->
<!--					</tr>-->
				</table>
				<el-button style= "margin-left:45%" type="button" id="purchasebutton" @click="purchase()">购买</el-button>
			</el-dialog>


			<div class="item">
				<img src="https://picsum.photos/360/460?random=1">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=2">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=3">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=4">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=5">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=6">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=7">
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/520?random=8">
			</div>
	</div>


	</div>
	<!-- --------------------页脚板块-------------------- -->
	<div class="footer">
		<p class="p2">这可太折腾了py© 2021 POWERED BY <span>???</span></p>
	</div>
	</div>

	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

	<script>
		$( "#dialog" ).dialog({ autoOpen: false ,modal:true});
		$( "#logindialog" ).dialog({ autoOpen: false ,modal:true});
		$( "#cartdialog" ).dialog({ autoOpen: false ,modal:true});

		function detail(){
			$( "#dialog" ).dialog( "open" );
		}
		var vue=new Vue({
			el: '#app',
			data () {
				return {
					info: null,
					itemid:null,
					cart:null,
					visible: false,
					userid:null,
					visible2:false,
					visible3:false
				}
			},
			methods:{
				detail : function (seq) {
					$("#dialogimg").attr('src',this.info[seq].img);
					$("#itemname").text(this.info[seq].itemname);
					$("#description").text(this.info[seq].description);
					$("#price").text(this.info[seq].price);
					// $("#itemname").attr('innerText',this.info[seq].itemname);
					// $("#description").attr('innerText',this.info[seq].description);
					// $("#price").attr('innerText',this.info[seq].price);
					// $("#dialogimg").src=this.info[seq].img;
					// $("#itemname").innerText=this.info[seq].itemname;
					// $("#description").innerText=this.info[seq].description;
					// $("#price").innerText=this.info[seq].price;
					itemid=this.info[seq].id;
					this.visible3=true;
					console.log("sdsdss");
					// $( "#dialog" ).dialog( "open" );
				},

				addCart(){
					var that=this;
					$.post("/cart/add", {"itemid":itemid}, function (data) {
						if (data) {
							that.$message({
								message: '添加成功',
								type: 'success'
							});
							//alert("添加成功");
						}
						else {
							that.$message.error('添加失败');
						}
					});
				},

				// add : function () {
				// 	$.post("/cart/add", {"itemid":itemid}, function (data) {
				// 		if (data) {
				// 			alert("添加成功");
				// 		}
				// 		else {
				// 			alert("添加失败");
				// 		}
				// 	});
				// },

				logindetail : function (){
					$( "#logindialog" ).dialog( "open" );
				},

				// login : function (){
				// 	$.post("/user/login", {"email":email.value,"password":password.value}, function (data) {
				// 		if (data) {
				// 			// window.location.href = "/itemtest.html";
				// 			window.location.href = "/index.html";
				// 			this.userid=sessionStorage.getItem('userid');
				// 		}
				// 		else {
				// 			alert("登录失败");
				// 		}
				// 	});
				// },
				logindetail(){
					this.visible2=true;
				},

				loginbutton(){
					var that=this;
					// let data = {
					// 	"email":email.value,
					// 	"password":password.value
					// }
					let params = new FormData();
					params.append('email', email.value);
					params.append('password', password.value);
					axios
							.post('/user/login',params,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
							.then(function (response){
								if(response.data){
									that.$message({
										message: '登录成功',
										type: 'success'
									});
									that.visible2=false;
								}
								else {
									that.$message({
										message: '邮箱或密码错误',
										type: 'warning'
									});
								}
							})
				},

				cartdetail(){
					this.visible=true;
					axios.post('/cart/')
							.then(response => (this.cart = response.data))
				},

				detelecart(cartid){
					var that=this;
					axios
							.post('/cart/delete',{cartid:cartid})
							.then(function (response){
								if(response.data){
									that.$message({
										message: '删除成功',
										type: 'success'
									});
									that.visible=false;
									that.cartdetail();
								}
								else {
									that.$message.error('删除失败');
								}
							})

				},

				purchase(){
					window.location.href = "/purchase2.html";
				}


				// cartdetail : function (){
				// 	var that = this;
				// 	$( "#cartdialog" ).dialog( "open" );
				// 	$.ajax({
				// 		type : "post",
				// 		url : "/cart/",
				// 		data : "",
				// 		async : false,
				// 		success : function(data) {
				// 			if (data) {
				// 				that.cart = data;
				// 			} else {
				// 				alert("获取购物车错误");
				// 			}
				// 		}
				// 	});
				// 	//Vue.$forceUpdate();
				// 	that.$forceUpdate();
				// 	this.$forceUpdate();
				// 	vue.$forceUpdate();
				// }
			},
			mounted () {
				axios
						.post('/item/list')
						.then(response => (this.info = response.data,this.userid=this.info.userid))



				// $("#addCart").on('click', (evt) => {
				// 	//console.log("called")
				// 	// const data = $(evt.target).data('logId');
				// 	// this.logData(data);
				// 	var that=this;
				// 	$.post("/cart/add", {"itemid":itemid}, function (data) {
				// 		if (data) {
				// 			that.$message.error('错了哦，这是一条错误消息');
				// 			//alert("添加成功");
				// 		}
				// 		else {
				// 			alert("添加失败");
				// 		}
				// 	});
				// });

				// $("#loginbutton").on('click', (evt) => {
				// 	//console.log("called")
				// 	// const data = $(evt.target).data('logId');
				// 	// this.logData(data);
				//
				// 	var that=this;
				// 	$.post("/user/login", {"email":email.value,"password":password.value}, function (data) {
				// 		if (data) {
				// 			window.location.href = "/index.html";
				// 			$.cookie({username:'email.value'});
				// 		}
				// 		else {
				// 			alert("失败");
				// 		}
				// 	});
				// });

				// $("#cartlink").on('click', (evt) => {
				// 	$.post("/user/login", {"email":email.value,"password":password.value}, function (data) {
				// 		if (data) {
				// 			window.location.href = "/index.html";
				// 		}
				// 		else {
				// 			alert("失败");
				// 		}
				// 	});
				// });


			}
		})
	</script>

</body>
</html>

